<!-- 床位设置页 -->
<template>
  <!-- 面包屑 -->
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">服务管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">床位管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #0468FF;font-weight: bold">床位设置</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索栏 -->
  <el-card style="margin: 20px;height: 70px;border: 0" shadow="never">
    <el-form>
      <el-row>
        <el-col :span="8">
          <el-form-item label="房间号" style="width: 300px;">
            <el-select v-model="searchForm.roomNumber"
                       @change="changeRoomNumber"
                       placeholder="请选择房间号">
              <el-option v-for="item in roomList" :label="item.number" :value="item.number"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="床位状态" style="width: 300px;">
            <el-select v-model="searchForm.status"
                       @change="loadData"
                       placeholder="请选择床位状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="空闲" value="空闲"></el-option>
              <el-option label="已占用" value="已占用"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadData">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" style="margin-left: 30px;" @click="addBed">新建床位</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <!-- 列表 -->
  <el-card style="margin:20px;border: 0" shadow="never">
    <el-table :data="currentTableData" height="550px"
              :row-style="{'height':'50px'}"
              :cell-style="{'color':'#000'}"
              :header-cell-style="{
                'background-color': '#f2f2f2',
                'color': '#000',
                'height':'50px'
              }">
      <el-table-column prop="id" label="床位编码" align="center"/>
      <el-table-column prop="bedNumber" label="床位号" align="center"/>
      <el-table-column prop="status" label="床位状态" align="center"/>
      <el-table-column prop="roomNumber" label="房间号" align="center"/>
      <el-table-column prop="floorNumber" label="所属楼层" align="center"/>
      <el-table-column prop="type" label="房间类型" align="center"/>
      <el-table-column prop="createdTime" label="记录时间" align="center" width="200"/>
      <el-table-column width="150" fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editBed(scope.row)">编辑</el-button>
          <el-button link type="danger" @click="deleteBed(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        style="margin-top: 20px;margin-left: 5px;"
    />
  </el-card>

  <!-- 新建和编辑弹窗 -->
  <el-dialog v-model="dialogVisible"
             :title="dialogTitle"
             :before-close="handleClose"
             style="width:500px;height: 380px;padding: 50px 80px;">
    <el-form label-width="100px">
      <el-form-item label="床位号">
        <el-input placeholder="请输入床位号" v-model="dialogForm.number"></el-input>
      </el-form-item>
      <el-form-item label="床位价格">
        <el-input placeholder="请输入床位价格" v-model="dialogForm.price"></el-input>
      </el-form-item>
      <el-form-item label="所属房间">
        <el-select v-model="dialogForm.roomNumber"
                   @change="changeRoomNumber"
                   placeholder="请选择房间号">
          <el-option v-for="item in roomList" :label="item.number" :value="item.number"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="床位状态">
        <el-select v-model="dialogForm.status" placeholder="请选择" style="">
          <el-option label="已占用" value="已占用"></el-option>
          <el-option label="空闲" value="空闲"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" style="margin-right:40px;">取消</el-button>
      <el-button @click="saveBed" type="primary">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//搜索栏数据
const searchForm = ref({roomNumber: '1101', status: ''})
//重置搜索栏
const resetSearch = () => {
  searchForm.value = {roomNumber: '1101', status: ''}
  loadData()
}
//表格数据
const tableData = ref([])
const currentTableData = ref([]) // 当前页显示的数据
const currentPage = ref(1)      // 当前页码
const pageSize = ref(10)        // 每页条数
//加载表格数据
const loadData = () => {
  let data = qs.stringify(searchForm.value)
  axios.get(BASE_URL + '/v1/bed/selectBedList?' + data)
      .then((response) => {
        if (response.data.state == 2000) {
          tableData.value = response.data.data
          updateCurrentData()
        } else {
          ElMessage.error(response.data.message)
        }
      })
}
onMounted(() => {
  loadData()
})

// 获取数据（示例）
const fetchData = async () => {
  // 这里替换为你的API请求
  // dataTable.value = await api.getData();

}

// 更新当前页数据
const updateCurrentData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  currentTableData.value = tableData.value.slice(start, end)
}

// 每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  updateCurrentData()
}

// 页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  updateCurrentData()
}

// 生命周期钩子
onMounted(() => {
  fetchData()
})

//获取可选房间列表
const roomList = ref([])
const getRoomList = () => {
  axios.get(BASE_URL + '/v1/room/select?')
      .then((response) => {
        if (response.data.state == 2000) {
          roomList.value = response.data.data
        } else {
          ElMessage.error(response.data.message)
        }
      })
}
onMounted(() => {
  getRoomList()
})

const changeRoomNumber = () => {
  loadData()
}

//控制弹窗显示、标题
const dialogVisible = ref(false)
const dialogTitle = ref('新增床位')
//弹窗表单
const dialogForm = ref({id: '', number: '', price: '', roomNumber: '', status: ''})
//新增
const addBed = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增床位'
}
//编辑
const editBed = (row) => {
  dialogVisible.value = true
  dialogTitle.value = '编辑床位'
  dialogForm.value.id = row.id
  dialogForm.value.roomNumber = row.roomNumber
  dialogForm.value.status = row.status
  dialogForm.value.price = row.price
  dialogForm.value.number = row.bedNumber
}
//删除
const deleteBed = (id) => {
  axios.post(BASE_URL + '/v1/bed/delete/' + id)
      .then((response) => {
        if (response.data.state == 2000) {
          ElMessage.success('删除成功！')
          loadData()
        } else {
          ElMessage.error(response.data.message)
        }
      })
}
//处理弹窗关闭
const handleClose = () => {
  dialogVisible.value = false
  dialogForm.value = {id: '', number: '', price: '', roomNumber: '', status: ''}
}
//点击弹窗中的确定按钮后触发的方法
const saveBed = () => {
  let data = qs.stringify(dialogForm.value)
  axios.post(BASE_URL + '/v1/bed/save', data)
      .then((response) => {
        if (response.data.state == 2000) {
          ElMessage.success('保存成功!')
          loadData()
        } else {
          ElMessage.error(response.data.message)
        }
      })
  handleClose()
}
</script>

<style scoped>

</style>